import React, {useState} from 'react';
import {
  BackHandler,
  ToastAndroid,
  StatusBar,
  TouchableOpacity,
  Image,
  Text,
  StyleSheet,
  View,
} from 'react-native';
import Tab from './Tab';
import px2dp from '../utils/px2dp';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer, useFocusEffect} from '@react-navigation/native';
import NavScreenOpts from './NavScreenOpts';
import MainNav from './MainNav';
import {navigationRef, navigate} from './RootNavigation';
import SearchHeadIcon from '../components/SearchHeadIcon';

const Stack = createStackNavigator();
// const Stack1 = createStackNavigator();

function ScreenWithCustomBackBehavior(props) {
  // const [lastBackPressed, setLastBackPressed] = useState(0);
  // useFocusEffect(
  //   React.useCallback(() => {
  //     const onBackPress = () => {
  //       if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
  //         return false;
  //       }
  //       setLastBackPressed(Date.now());
  //       ToastAndroid.show('再点击一次退出应用', ToastAndroid.SHORT);
  //       return true;
  //     };
  //     BackHandler.addEventListener('hardwareBackPress', onBackPress);

  //     return () =>
  //       BackHandler.removeEventListener('hardwareBackPress', onBackPress);
  //   }, [lastBackPressed, setLastBackPressed]),
  // );
  return <Tab {...props} />;
}
// NavigationContainer全局触发事件 onStateChange={()=>{}}
export default () => (
  <NavigationContainer ref={navigationRef}>
    <StatusBar backgroundColor="white" barStyle="dark-content" />
    <Stack.Navigator
      mode="card"
      headerMode="screen"
      initialRouteName="firstScreen"
      screenOptions={NavScreenOpts}>
      <Stack.Screen
        options={({route}) => {
          const routeName = route.state?.routes[route.state?.index]?.name;
          if (routeName === 'Home' || routeName === undefined) {
            return {
              title: '掌引学苑',
              // headerLeft: () => (
              //   <TouchableOpacity>
              //     <Image
              //       style={styles.search}
              //       source={require('../assets/images/search.png')}
              //     />
              //   </TouchableOpacity>
              // ),
              headerRight: () => (
                <View style={styles.head_right_container}>
                  <TouchableOpacity
                    onPress={() => {
                      navigate('MsgNotice');
                    }}>
                    <Image
                      style={styles.msg}
                      source={require('../assets/images/home/msg.png')}
                    />
                  </TouchableOpacity>
                  {/* <TouchableOpacity  activeOpacity={1} onPress={() => {}}>
                    <Image
                      style={styles.qrcode}
                      source={require('../assets/images/home/qrcode.png')}
                    />
                  </TouchableOpacity> */}
                </View>
              ),
            };
          } else if (routeName === 'Study') {
            return {
              title: '学习',
              // headerRight: () => <SearchHeadIcon />,
            };
          } else if (routeName === 'Community') {
            return {
              title: '社区',
              // headerLeft: () => (
              //   <TouchableOpacity>
              //     <Image
              //       style={styles.search}
              //       source={require('../assets/images/search.png')}
              //     />
              //   </TouchableOpacity>
              // ),
              // headerRight: () => (
              //   <TouchableOpacity
              //     onPress={() => {
              //       navigate('AskQuestuon');
              //     }}>
              //     <Image
              //       style={styles.edit}
              //       source={require('../assets/images/edit.png')}
              //     />
              //   </TouchableOpacity>
              // ),
            };
          } else if (routeName === 'Me') {
            return {
              title: '',
              headerLeft: () => <Text style={styles.me_text}>我的</Text>,
              headerRight: () => (
                <View style={styles.head_right_container}>
                  <TouchableOpacity
                    onPress={() => {
                      navigate('MsgNotice');
                    }}>
                    <Image
                      style={styles.msg}
                      source={require('../assets/images/me/msg.png')}
                    />
                  </TouchableOpacity>
                  {/* <TouchableOpacity  activeOpacity={1} onPress={() => {}}>
                    <Image
                      style={styles.qrcode}
                      source={require('../assets/images/me/service.png')}
                    />
                  </TouchableOpacity> */}
                </View>
              ),
            };
          }
        }}
        name="Tab"
        component={ScreenWithCustomBackBehavior}
      />
      {Object.keys(MainNav)?.map((name) => (
        <Stack.Screen name={name} {...MainNav[name]} key={name} />
      ))}
    </Stack.Navigator>
  </NavigationContainer>
);
const styles = StyleSheet.create({
  edit: {
    width: px2dp(33),
    height: px2dp(33),
    marginRight: px2dp(40),
  },
  search: {
    width: px2dp(32),
    height: px2dp(32),
    marginLeft: px2dp(30),
  },
  head_icon: {
    marginRight: px2dp(36),
    fontSize: px2dp(44),
    color: '#333333',
  },
  head_right_container: {
    flexDirection: 'row',
  },
  qrcode: {
    width: px2dp(34),
    height: px2dp(34),
    marginRight: px2dp(36),
  },
  msg: {
    width: px2dp(39),
    height: px2dp(34),
    marginRight: px2dp(36),
  },
  me_text: {
    fontWeight: 'bold',
    color: '#333',
    fontSize: px2dp(34),
    marginLeft: px2dp(34),
  },
});
